<template>
	<view class="container">
		<uni-nav-bar :backgroundColor="navBarBackgroundColor" leftWidth="0" :statusBar="true" :border="false"
			:fixed="true">
			<block slot="left" style="display: flex;align-items: center;" v-if="navBarBackgroundColor!=='transparent'">
				<image class="h1"
					src="https://video.file.zhuochengyun.com/bwc/uploads/20240219/20240219170717328772.png">
				</image>
			</block>
		</uni-nav-bar>
		<!-- 		<swiper class="banner" :current="bannerCurrent" :circular="true">
			<swiper-item class="banner-item" v-for="(item,index) in banner" :key="index">
				<image mode="aspectFill" :src="item.image" class="banner-item-img" @click="jumpUrl(item)">
			</swiper-item>
		</swiper> -->
		<image class="swiper-img" v-if="banner.length>0" mode="widthFix" :src="banner[0].image"></image>
		<view class="header">
			<image class="h1" src="https://video.file.zhuochengyun.com/bwc/uploads/20240219/20240219170717328772.png">
			</image>
			<view @click="chooseLocation" class="address ">
				<view class="text overflowText1">{{region.address}}</view>
				<image src="https://video.file.zhuochengyun.com/bwc/uploads/20240201/20240201201758322146.png"></image>
			</view>
		</view>
		<navigator url="/pages/search/search" class="page-search">
			<view class="search">
				<input :disabled="true" placeholder="搜寻好点,享好餐"></input>
			</view>
		</navigator>
		<view class="navs">
			<view class="nav-li" v-for="(item,index) in nav_list" :key="index" @click="jumpUrl(item)">
				<view class="nav-li-content">
					<image class="nav-li-img" :src="item.image"></image>
					<!-- <image class="nav-li-tag"></image> -->
				</view>
				<text class="nav-li-txt">{{ item.title }}</text>
			</view>
		</view>
		<!-- <view class="newUser">
			<view class="newUser-title">新人好礼
				<text>如何使用小小</text>
			</view>
			<view class="newUser-content">
				<view class="floor-1">
					<view class="floor-1-txt">团员完成3单
						<view>最高额外得23元</view>
						<text>体现秒到账</text>
					</view>
					<view class="floor-1-btn">去了解</view>
					<image class="floor-1-img"
						src="https://video.file.zhuochengyun.com/bwc/uploads/20240201/20240201084557854312.png"></image>
				</view>
				<view class="floor-2" style="margin-bottom: 10rpx;">
					<image class="floor-2-img"
						src="https://video.file.zhuochengyun.com/bwc/uploads/20240201/20240201084421676943.png"></image>
					<view class="floor-2-txt">
						<view>免费升会员</view>
						<view>尊享9大特权</view>
						<text>每月可多省800</text>
					</view>
				</view>
				<view class="floor-2">
					<image class="floor-2-img"
						src="https://video.file.zhuochengyun.com/bwc/uploads/20240201/20240201084421676943.png"></image>
					<view class="floor-2-txt">
						<view>显示挑战</view>
						<view>完成挑战赢现金</view>
						<text>显示挑战奖励多</text>
					</view>
				</view>
				<view style="clear:both;"></view>
			</view>
		</view> -->
		<swiper class="swiper">
			<swiper-item class="swiper-item">
				<image class="swiper-img" mode="scaleToFill" @click="goMini(setting.key2.url)"
					:src="setting.key2.smallimage"></image>
			</swiper-item>
		</swiper>
		<view class="select">
			<view style="display: flex;align-items: center;">
				<image class="select-icon"
					src="https://video.file.zhuochengyun.com/bwc/uploads/20240220/20240220141622914982.png"></image>
			</view>
			<!-- <view class="select-li" @click="juliChange">距离
				<image src="@/static/img/jiang.png" class="variety-image" :class="[juliup==true?'arrowup':'arrowdown']">
				</image>
			</view>
			<view class="select-li" @click="jiageChange">价格
				<image src="@/static/img/jiang.png" class="variety-image"
					:class="[jiageup==true?'arrowup':'arrowdown']">
				</image>
			</view> -->
		</view>
		<!-- 	<view class="tags">
			<view class="sorts tag">推荐排序</view>
			<view class="hot  tag">
				<image class="hot-img"
					src="https://video.file.zhuochengyun.com/bwc/uploads/20240201/20240201084437823943.png"></image>
				高返利
			</view>
			<view class="no  tag">无需评价</view>
			<view class="radio  tag">筛选</view>
		</view> -->
		<view class="list">
			<view class="li" v-for="(item,index) in storeData" :key="index">
				<image class="good-img" :src="item.image"></image>
				<view class="good-info">
					<view class="good-name">
						<image class="center-img" @click="goMeiTuan" v-if="item.platform==='meituan'"
							src="https://video.file.zhuochengyun.com/bwc/uploads/20240201/20240201135754183391.png">
						</image>
						<image class="center-img" @click="goEleme" v-if="item.platform==='eleme'"
							src="https://video.file.zhuochengyun.com/bwc/uploads/20240201/20240201135650804211.png">
						</image>
						{{item.name}}
					</view>
					<view class="good-desc">
						<view class="good-rules" v-if="item.rule && item.activity.length == 1">
							<view class="good-tag "
								:class="{'good-tag-red':rule_index==0,'good-tag-orange':rule_index==1,'good-tag-green':rule_index==2}"
								v-for="(rule,rule_index) in item.rule.split('|')" :key="rule_index">{{rule}}</view>
						</view>
					</view>
					<view class="good-active ">
						<view class="good-time">
							<view class="good-distance" :style="item.activity.length>1?'margin-top:40rpx':''">
								距离：{{item.distance}}</view>
							<text
								v-if="item.activity.length == 1">抢单时间：{{item.activity[0].start_end_array[0]}}-{{item.activity[0].start_end_array[1]}}</text>
						</view>
						<view class="good-progress" v-if="item.activity.length==1">
							<view class="progress-line">
								<view class="line"
									:style="{width:item.activity[0].stock/item.activity[0].total_stock*100+'%'}"></view>
							</view>
							还剩<text>{{item.activity[0].stock}}</text>份
						</view>
					</view>
					<view v-if="item.activity.length>1" class="good-active" style="width: 100%;margin-top: 35rpx;">
						共{{item.activity.length}}个活动</view>
					<view class="good-pay" v-if="item.activity&&item.activity.length==1"
						@click="storeTap(item.activity[0],item,0)">去抢单</view>
				</view>
				<view style="width:100%" v-if="item.activity&&item.activity.length>1">
					<view class="actives" v-for="(col,col_index) in item.activity" :key="index">
						<view class="active-name">活动{{col_index+1}}</view>
						<view class="active-info">
							<view class="good-rules">
								<view class="good-tag "
									:class="{'good-tag-red':rule_index==0,'good-tag-orange':rule_index==1,'good-tag-green':rule_index==2}"
									v-for="(rule,rule_index) in col.rule_list" :key="rule_index">{{rule}}</view>
								<view class="active-progress">
									还剩<text>{{col.stock}}</text>份
									<view class="active-line">
										<view class="line" :style="{width:col.stock/col.total_stock*100+'%'}"></view>
									</view>
								</view>
							</view>
							<view style="display: flex;align-items: center;margin-top: 20rpx;">
								<view class="active-time">{{col.start_end_array[0]}}-{{col.start_end_array[1]}}</view>


							</view>
							<view class="good-pay" @click="storeTap(item.activity[col_index],item,col_index)">去抢单</view>
						</view>

					</view>
				</view>

			</view>
			<view class="noMore" v-if="!has_more">
				暂无更多了
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStoreList,
		getWxConfig,
		getIndexData,
		save_addr,
		xcxuserImg
	} from '../../apirequest/api.js';
	import {
		dateFormat
	} from '@/utils/util.js'
	const QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
	export default {
		data() {
			return {
				navBarBackgroundColor: 'transparent',
				searchText: '',
				juliup: false,
				jiageup: false,
				navs: [{
						img: '',
						txt: '美团红包',
						tag: ''
					}, {
						img: '',
						txt: '饿了么红包',
						tag: ''
					}, {
						img: '',
						txt: '霸王餐',
						tag: ''
					}, {
						img: '',
						txt: '商家入驻',
						tag: ''
					},
					{
						img: '',
						txt: '新人必看',
						tag: ''
					}
				],
				banner: [],
				cat_list: [],
				nav_list: [],
				tag_1: [],
				hongbao: [],
				bannerCurrent: 0,
				region: {
					province: '',
					city: '',
					district: '',
					address: '',
					latitude: 0,
					longitude: 0
				},
				storeData: [],
				distance: 0,
				pageNo: 1,
				has_more: true,
				setting: {}
			}
		},
		filters: {
			timeFilter(str) {
				return dateFormat('HH:MM:SS', new Date(str))
			}
		},
		onLoad(option) {
			console.log(option, 'asd');
			const {
				parent_id
			} = option
			this.getSetting()
			uni.setStorageSync('parent_id', parent_id)
			const _this = this
			this.qqmapsdk = new QQMapWX({
				key: '5GEBZ-RHECU-SWOVM-26CNG-EBL7E-YEFWM'
			});
			this.loadData()
			const region = uni.getStorageSync('region')
			if (region) {
				this.region = JSON.parse(region)
				this.loadStore()
			} else {
				uni.getLocation({
					success(res) {
						_this.geoCoder(res.latitude, res.longitude)
					}
				})
			}
		},
		onShow() {},
		onReachBottom() {
			if (this.has_more) {
				this.pageNo += 1
				this.loadStore()
			}
		},
		onPageScroll(e) {
			const {
				scrollTop
			} = e
			if (scrollTop > 50) {
				this.navBarBackgroundColor = '#e04b2a'
			} else {
				this.navBarBackgroundColor = 'transparent'
			}
		},
		methods: {
			getSetting() {
				xcxuserImg().then(res => {
					if (res.code === 1) {
						this.setting = {}
						res.data.forEach(item => {
							this.setting['key' + item.id] = item
						})
					}
				})
			},
			goMini(url) {
				uni.navigateToMiniProgram({
					appId: 'wxde8ac0a21135c07d',
					path: url,
					envVersion: "release",
					success: res => {
						// 打开成功
						console.log("打开成功", res);
					},
					fail: err => {
						console.log(err);
					}
				})

			},
			goEleme() {
				uni.navigateToMiniProgram({
					appId: 'wxece3a9a4c82f58c9',
					path: 'ele-recommend-price/pages/guest/index?inviterId=782101a9&chInfo=ch_wechat_chsub_CopyLink&_ltracker_f=tjyj1_wx_fuceng',
					envVersion: "release",
					success: res => {
						// 打开成功
						console.log("打开成功", res);
					},
					fail: err => {
						console.log(err);
					}
				})
			},
			goMeiTuan() { // 跳转至美团

				uni.navigateToMiniProgram({
					appId: 'wxde8ac0a21135c07d',
					// path: 'index/pages/h5/h5?f_token=0&weburl=https%3A%2F%2Fclick.meituan.com%2Ft%3Ft%3D1%26c%3D2%26p%3DOVbwTL5znsiV&f_openId=0&noshare=1&f_userId=0',
					path: '/index/pages/h5/mtlm/mtlm?mt=10&lm=MTc1ODczOTM5ODg3Njk0MjQxNg%3D%3DMzM2%3D%3D%3D%3D&uid=435536&container=meituan_wxmini&lch=cps:daozong:5:2a2dd31923d27ea8fc102450ebcc558a:shouyehongbaotuiguang:376:435536',
					envVersion: "release",
					success: res => {
						// 打开成功
						console.log("打开成功", res);
					},
					fail: err => {
						console.log(err);
					}
				})
			},
			storeTap(item, store,col_index) {
				if (!item) {
					return;
				}
				if (parseInt(item.open_buy) == 0) {
					let time = item.open_start + "-" + item.open_end;
					uni.showToast({
						icon: 'none',
						title: '未到报名时间，报名时间' + time,
						duration: 2000
					});

				} else if (parseInt(item.stock) <= 0) {
					uni.showToast({
						icon: 'none',
						title: '今日名额已抢光',
						duration: 2000
					})
				} else {
					this.distance = store.distance;
					uni.navigateTo({
						url: `/pages/details/newDetail?id=${item.store_id}&activity_id=${item.id}&distance=${this.distance}&col_index=${col_index}`
					})
				}

			},
			jumpUrl(item) {
				switch (item.title) {
					case '美团红包':
						this.goMeiTuan()
						break;
					case '饿了么红包':
						this.goEleme()
						break;
					case '内部福利群':
						uni.navigateTo({
							url: '/pages/joinGroup/index'
						})
						break;
					// case '商家入驻':
					// 	uni.navigateTo({
					// 		url: '/pages/settlement/index'
					// 	})
					// 	break;
					case '新人必看':
						uni.navigateTo({
							url: '/pages/newGuidance/newGuidance'
						})
						break;
					default:
						break;
				}
			},
			chooseLocation() {
				const _this = this
				uni.chooseLocation({
					success(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						_this.geoCoder(res.latitude, res.longitude)
					}
				});
			},
			geoCoder(latitude, longitude) {
				// 调用接口
				const _this = this
				this.qqmapsdk.reverseGeocoder({
					location: latitude + ',' + longitude,
					success(result) {
						const address_component = result.result.address_component
						_this.region = {
							province: address_component.province,
							city: address_component.city,
							district: address_component.district,
							latitude: latitude,
							longitude: longitude,
							address: result.result.formatted_addresses.rough
						}
						uni.setStorageSync('region', JSON.stringify(_this.region))
						_this.storeData = []
						_this.pageNo = 1
						_this.loadStore()
						// save_addr({
						// 	province: address_component.province,
						// 	city: address_component.city,
						// 	district: address_component.district,
						// }).then((res) => {
						// 	if (res.code == 1) {}
						// }).catch(err => {
						// 	console.log(err)
						// })

					},
					fail(err) {
						console.log(err);
					}
				})
			},
			juliChange() {
				if (this.juliup == false) {
					this.juliup = true
				} else {
					this.juliup = false
				}
				this.sort = 1
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				}
				this.loadDataList();
			},
			jiageChange() {
				if (this.jiageup == false) {
					this.jiageup = true
				} else {
					this.jiageup = false
				}
				this.sort = 2
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				}
				this.loadDataList();
			},
			loadData() {
				getIndexData().then(res => {
					if (res.code == 1) {
						this.banner = res.data.banner;
						this.cat_list = res.data.cat_list;
						this.nav_list = res.data.nav_list;
						this.tag_1 = res.data.tag_1;
						this.hongbao = res.data.hongbao;
					}
				})
			},
			loadStore() {
				const {
					province,
					city,
					district,
					latitude,
					longitude
				} = this.region
				getStoreList({
					openid:'o1eu36zBQcN8AgnWgH0j5Ib1hryM',
					page: this.pageNo,
					latitude,
					longitude,
					category_id: 0,
					juliup: this.juliup,
					jiageup: this.jiageup,
					sort: 1,
					tag_id: 1,
					province,
					city,
					district,
					keyword: ''
				}).then(res => {
					if (res.code == 1) {
						this.storeData = this.storeData.concat(...res.data.data)
						this.has_more = res.data.has_more
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		box-sizing: border-box;
		background-color: #f5f4f2;

		.h1 {
			width: 260rpx;
			height: 50rpx;
			margin-top: 20rpx;
		}

		.list {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;

			.li {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				background-color: #fff;
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.good-rules {
					flex: 1;
					display: flex;
					align-items: center;

					.good-tag {
						font-size: 24rpx;
						padding: 2rpx 10rpx;
						border-radius: 5rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 15rpx;
						overflow: hidden;
					}

					.good-tag-red {
						background-color: #ff5748;
						border: 1rpx solid #ff5748;
						color: #fff;

					}

					.good-tag-orange {

						color: #ff7701;
						border: 1rpx solid #ff7701;
						border-radius: 5rpx;
					}

					.good-tag-green {
						color: #1bc182;
						border: 1rpx solid #1bc182;
						border-radius: 5rpx;
					}
				}


				.good-img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;
				}

				.good-info {
					flex: 1;
					position: relative;



					.good-name {
						font-size: 32rpx;
						margin-bottom: 10rpx;
						display: flex;
						align-items: center;

						.center-img {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}
					}

					.good-desc {
						display: flex;
						flex-wrap: wrap;

						.good-pos-center {
							text-align: center;
							margin-right: 20rpx;
							display: flex;
							flex-direction: column;

							.center-img {
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
								background-color: red;
							}

							.centet-txt {
								font-size: 24rpx;
								color: #999;
							}
						}


					}

					.good-active {
						color: #999;
						font-size: 24rpx;
						margin-top: 20rpx;

						.good-time {
							display: flex;
							align-items: center;
							justify-content: space-between;
							flex-direction: row-reverse;
							font-size: 20rpx;
							color: #999;
							margin-bottom: 30rpx;

							.good-distance {}
						}

						.good-progress {
							display: flex;
							align-items: center;

							.progress-line {
								width: 120rpx;
								height: 15rpx;
								border-radius: 10rpx;
								background-color: #ffcac6;
								margin-right: 10rpx;

								.line {
									width: 20%;
									height: 100%;
									background-color: #ff5748;
									border-radius: 10rpx;
								}
							}

							text {
								color: #ff5748;
							}

						}
					}

					.good-pay {
						position: absolute;
						right: 0;
						bottom: 0;
						background-color: #ff7604;
						color: #fff;
						font-size: 24rpx;
						padding: 10rpx 20rpx;
						border-radius: 30rpx;
					}

				}

				.actives {
					position: relative;
					width: 100%;
					margin-top: 20rpx;

					&::after {
						width: 670rpx;
						height: 2rpx;
						background-color: #efefef;
						content: '';
						position: absolute;
						left: 0;
						top: 25rpx;
						transform: translateY(-1rpx);
						z-index: 1;
					}

					.active-name {
						display: inline-block;
						font-size: 24rpx;
						background-color: #efefef;
						border-radius: 10rpx 0 10rpx 0;
						position: relative;
						padding: 2rpx 15rpx;
						position: relative;
						z-index: 3;

					}

					.good-pay {
						position: absolute;
						right: 0;
						bottom: 0;
						background-color: #ff7604;
						color: #fff;
						font-size: 24rpx;
						padding: 10rpx 20rpx;
						border-radius: 30rpx;
					}

					.active-info {

						.good-rules {
							flex: 1;
							display: flex;
							align-items: center;
							margin-top: 20rpx;
							position: relative;

							.good-tag {
								font-size: 24rpx;
								padding: 2rpx 10rpx;
								border-radius: 5rpx;
								box-sizing: border-box;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-right: 15rpx;
								overflow: hidden;
							}

							.good-tag-red {
								background-color: #ff5748;
								color: #fff;

							}

							.good-tag-orange {

								color: #ff7701;
								border: 1rpx solid #ff7701;
								border-radius: 10rpx;
							}

							.good-tag-green {
								color: #1bc182;
								border: 1rpx solid #1bc182;
								border-radius: 10rpx;
							}
						}

						.active-time {
							font-size: 24rpx;
							color: #999;
							margin-right: 20rpx;
						}

						.active-progress {
							text-align: center;
							font-size: 24rpx;
							color: #999;
							margin-left: 50rpx;
							position: absolute;
							right: 0;
							top: 50%;
							transform: translateY(-90%);

							.active-line {
								width: 110rpx;
								height: 15rpx;
								border-radius: 10rpx;
								background-color: #ffcac6;
								margin-right: 10rpx;
								margin-top: 10rpx;

								.line {
									width: 0%;
									height: 100%;
									background-color: #ff5748;
									border-radius: 10rpx;
								}
							}

							text {
								color: #ff5748;
							}
						}
					}

				}
			}
		}

		.variety-image {
			margin: 0px 4px;
			width: 12px;
			height: 12px
		}

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx 0;
			box-sizing: border-box;
			position: relative;
			z-index: 2;


			.address {

				position: relative;
				z-index: 2;
				color: #fff;
				font-size: 24rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				.text {
					width: 250rpx;
				}

				image {
					width: 17rpx;
					height: 8rpx;
					margin-left: 10rpx;
				}
			}
		}


		::v-deep .search {
			width: 100%;
			position: relative;
			z-index: 2;
			padding: 20rpx 0;

			input {
				width: 710rpx;
				height: 60rpx;
				border-radius: 30rpx;
				background-color: #fff;
				font-size: 24rpx;
				padding-left: 40rpx;
				box-sizing: border-box;
				margin: auto;
			}
		}

		::v-deep .banner {
			width: 100vw;
			z-index: 2;
			height: 423rpx;
			// position: absolute;
			// left: 0;
			// top: 0;
			// z-index: 1;

			.banner-item {
				width: 100%;
				height: 423rpx;

				.banner-item-img {
					width: 100%;
					height: 423rpx;
				}
			}
		}

		.swiper-img {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.navs {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 320rpx 20rpx 0;
			box-sizing: border-box;

			.nav-li {
				width: 130rpx;
				margin-right: 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.nav-li-content {
					.nav-li-img {
						width: 80rpx;
						height: 80rpx;
					}
				}

				.nav-li-txt {
					font-size: 24rpx;
					margin-top: 10rpx;
					font-weight: bold;
				}

				&:last-child {
					margin-right: 0;
				}
			}
		}

		.newUser {
			width: 710rpx;
			margin: 30rpx auto;
			background-color: #ff3217;
			border-radius: 20rpx;
			padding: 20rpx 20rpx;
			box-sizing: border-box;

			.newUser-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #fff;
				display: flex;

				text {
					font-size: 20rpx;
					margin-left: 20rpx;
					border: 1rpx solid #fff;
					padding: 2rpx 15rpx;
					border-radius: 30rpx;
					font-weight: normal;
				}
			}

			.newUser-content {
				width: 100%;
				margin-top: 20rpx;

				.floor-1 {
					height: 280rpx;
					width: calc(50% - 5rpx);
					background-color: #fff;
					border-radius: 20rpx;
					padding: 20rpx 20rpx 0;
					box-sizing: border-box;
					position: relative;
					float: left;

					.floor-1-txt {
						font-size: 28rpx;

						text {
							font-size: 24rpx;
						}
					}

					.floor-1-btn {
						display: inline-block;
						color: #fff;
						font-size: 20rpx;
						padding: 5rpx 10rpx;
						border-radius: 20rpx;
						background-color: #ff7a00;
						margin-top: 20rpx;
					}

					.floor-1-img {
						width: 100rpx;
						height: 100rpx;
						position: absolute;
						right: 30rpx;
						bottom: 30rpx;
					}
				}

				.floor-2 {
					width: calc(50% - 5rpx);
					height: 135rpx;
					float: right;
					display: flex;
					align-items: center;
					padding: 20rpx 20rpx;
					box-sizing: border-box;
					background-color: #fff;
					border-radius: 20rpx;

					.floor-2-img {
						width: 80rpx;
						height: 80rpx;
						margin-right: 20rpx;
					}

					.floor-2-txt {
						font-size: 24rpx;

						text {
							font-size: 20rpx;
						}
					}
				}
			}
		}

		.swiper {
			width: 710rpx;
			height: 200rpx;
			margin: 20rpx auto;

			.swiper-item {
				height: 200rpx;

				.swiper-img {
					width: 100%;
					height: 200rpx;
					border-radius: 20rpx;
				}
			}
		}

		.select {
			width: 710rpx;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.select-icon {
				width: 281.25rpx;
				height: 56.25rpx;
				margin-right: 20rpx;
			}

			.select-title {
				font-size: 32rpx;
			}

			.select-li {
				flex: 1;
				text-align: center;
				font-size: 24rpx;
			}
		}

		.tags {
			width: 710rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: auto;
			margin-top: 20rpx;

			.tag {
				height: 40rpx;
				display: flex;
				align-items: center;
				padding: 5rpx 20rpx;
				background-color: #fff;
				font-size: 20rpx;
				border-radius: 4rpx;
			}

			.sorts {}

			.hot {
				display: flex;

				.hot-img {
					width: 20rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}

			.no {}

			.radio {
				font-size: 24rpx;
			}
		}
	}
</style>